{{ define "js" }}
  <script type="text/javascript" src="/js/datatables.min.js"></script>
  <script type="text/javascript" src="/js/datatable_input.js"></script>
  <script type="text/javascript" src="/js/datatable_loader.js"></script>
  <script type="text/javascript" src="/js/highcharts/highstock.min.js"></script>
  <script type="text/javascript" src="/js/highcharts/highcharts-global-options.js"></script>
    <script>
        $(document).ready(function() {
          var usp = new URLSearchParams(window.location.search)
          var q = usp.get('q')
          {{ if len .DepositContract }}
            var tbl = $('#initiated-deposits').DataTable({
              searchDelay: 0,
              processing: true,
              serverSide: true,
              ordering: true,
              stateSave: true,
              stateSaveCallback: function (settings, data) {
                data.start = 0
                localStorage.setItem("DataTables_" + settings.sInstance, JSON.stringify(data))
              },
              stateLoadCallback: function (settings) {
                return JSON.parse(localStorage.getItem("DataTables_" + settings.sInstance))
              },
              order: [[5, 'desc']],
              searching: true,
              ajax: dataTableLoader('/validators/initiated-deposits/data'),
              pagingType: 'input',
              preDrawCallback: function() {
                  // this does not always work.. not sure how to solve the staying tooltip
                  try {
                      $('#deposits').find('[data-toggle="tooltip"]').tooltip('dispose')
                  } catch (e) {
                  }
              },
              drawCallback: function(settings) {
                  formatTimestamps('#initiated-deposits')
              },
              language: {
                  searchPlaceholder: 'Address | Val. Key | Withd. Cred. | Tx Hash | ENS address',
                  search: '',
                  paginate: {
                      previous: '<i class="fas fa-chevron-left"></i>',
                      next: '<i class="fas fa-chevron-right"></i>'
                  }
              },
              columnDefs: [
                { orderable: false, targets: 0 },
                { orderable: false, targets: 1 },
                { orderable: false, targets: 2 },
                { orderable: false, targets: 3 },
                { orderable: false, targets: 4 },
                { orderable: true, targets: 5 },
                { orderable: false, targets: 6 },
                { orderable: false, targets: 7 },
              ],
            })
          {{end}}
          var tblIncluded = $("#included-deposits").DataTable({
            searchDelay: 0,
            processing: true,
            serverSide: true,
            ordering: true,
            stateSave: true,
            stateSaveCallback: function (settings, data) {
              data.start = 0
              localStorage.setItem("DataTables_" + settings.sInstance, JSON.stringify(data))
            },
            stateLoadCallback: function (settings) {
              return JSON.parse(localStorage.getItem("DataTables_" + settings.sInstance))
            },
            order: [[0, "desc"]],
            searching: true,
            ajax: dataTableLoader("/validators/included-deposits/data"),
            pagingType: "input",
            language: {
              searchPlaceholder: "Slot | Validator Key | Withdrawal Credentials | ENS address",
              search: "",
              paginate: {
                previous: '<i class="fas fa-chevron-left"></i>',
                next: '<i class="fas fa-chevron-right"></i>',
              },
            },
            drawCallback: function (settings) {
              $('[data-toggle="tooltip"]').tooltip()
            },
            columnDefs: [
              { orderable: true, targets: 0 },
              { orderable: false, targets: 1 },
              { orderable: false, targets: 2 },
              {
                targets: 3,
                orderable: false,
                data: "3",
                render: function (data, type, row, meta) {
                  // make the span we get from the backend into a DOM element and extract the text value from it (because clipboard text takes only string, not HTML elements)
                  const clipboardtext = $(row[5]).text()
                  if (clipboardtext.startsWith("0x01")) {
                    data = `<a href="/address/${clipboardtext.replace("010000000000000000000000", "")}">${data}</a>`
                  }
                  if (clipboardtext.startsWith("0x02")) {
                    data = `<a href="/address/${clipboardtext.replace("020000000000000000000000", "")}">${data}</a>`
                  }
                  return `${data}<i class="fa fa-copy text-muted ml-2 p-1" role="button" data-toggle="tooltip" title="Copy to clipboard" data-clipboard-text="${clipboardtext}"></i>`
                },
              },
              {
                targets: 4,
                orderable: false,
                data: "4",
                render: function (data, type, row, meta) {
                  const clipboardtext = $(row[6]).text()
                  return `${data}<i class="fa fa-copy text-muted ml-2 p-1" role="button" data-toggle="tooltip" title="Copy to clipboard" data-clipboard-text="${clipboardtext}"></i>`
                },
              },
            ],
          })
          if (q) {
              tblIncluded.search(q);
              tblIncluded.draw();
          }
          $("#included-deposits_filter > label > input").on('input', function(ev) {
              if (ev && ev.target && ev.target.value) {
                  var newUrl = window.location.pathname + "?q=" + encodeURIComponent(ev.target.value)
                  q = ev.target.value
                  window.history.replaceState(null, 'Deposits', newUrl)
              } else {
                  window.history.replaceState(null, 'Deposits', window.location.pathname)
                  q = ""
              }
              if(tbl) {
                tbl.search(q || "");
                tbl.draw();
              }
          })
          if (q) {
              tbl.search(q);
              tbl.draw();
          }
          $("#initiated-deposits_filter > label > input").on('input', function(ev) {
              if (ev && ev.target && ev.target.value) {
                  var newUrl = window.location.pathname + "?q=" + encodeURIComponent(ev.target.value)
                  q = ev.target.value
                  window.history.replaceState(null, 'Deposits', newUrl)
              } else {
                  window.history.replaceState(null, 'Deposits', window.location.pathname)
                  q = ""
              }
              if(tblIncluded) {
                  tblIncluded.search(q || "");
                  tblIncluded.draw();
              }
          })
        })
    </script>
{{ end }}
{{ define "css" }}
  <link rel="stylesheet" type="text/css" href="/css/datatables.min.css" />
{{ end }}

{{ define "content" }}
  {{ with .Data }}
    <div class="container my-2">
      <div class="d-md-flex py-2 justify-content-md-between mb-3">
        <div class="heading">
          <h1 class="h4 mb-1 mb-md-0"><i class="fas fa-file-signature mr-2"></i>Deposits</h1>
        </div>
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb font-size-1 mb-0" style="padding:0; background-color:transparent;">
            <li class="breadcrumb-item"><a href="/" title="Home">Home</a></li>
            <li class="breadcrumb-item"><a href="/validators" title="Validators">Validators</a></li>
            <li class="breadcrumb-item active" aria-current="page">Eth Deposits</li>
          </ol>
        </nav>
      </div>
      <div id="r-banner" info="{{ $.Meta.Templates }}"></div>
      <div class="row mb-1">
        <div class="col-md-4 mb-4">
          <div class="card h-100">
            <div class="card-body">
              <div class="d-flex justify-content-between align-item-center">
                <h2 class="small text-uppercase font-weight-medium text-secondary mr-1">Top Depositor</h2>
                <span class="h6" title="Number of deposits made">{{ if len .Stats.TopDepositors }}{{ (index .Stats.TopDepositors 0).DepositCount }}{{ else }}0{{ end }} Deposits</span>
              </div>
              <div class="d-flex align-items-center">
                <span style="max-width: 150px;" class="h6 font-weight-normal mb-0 text-truncate">
                  <a href="/validators/deposit-leaderboard" class="text-primary text-truncate">
                    <i class="fas fa-medal"></i>
                    {{ if len .Stats.TopDepositors }}0x{{ (index .Stats.TopDepositors 0).Address }}{{ end }}
                  </a>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4 mb-4">
          <div class="card h-100">
            <div class="card-body">
              <div class="d-flex justify-content-between align-item-center">
                <h2 class="small text-uppercase font-weight-medium text-secondary mr-1">Runner Up</h2>
                <span class="h6" title="Number of deposits made">{{ if gt (len .Stats.TopDepositors) 1 }}{{ (index .Stats.TopDepositors 1).DepositCount }}{{ else }}0{{ end }} Deposits</span>
              </div>
              <div class="d-flex align-items-center">
                <span style="max-width: 150px;" class="h6 font-weight-normal mb-0 text-truncate">
                  <a href="/validators/deposit-leaderboard" class="text-primary text-truncate">
                    <i class="fas fa-medal"></i>
                    {{ if gt (len .Stats.TopDepositors) 1 }}
                      0x{{ (index .Stats.TopDepositors 1).Address }}
                    {{ else }}
                      N/A
                    {{ end }}
                  </a>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4 mb-4">
          <div class="card h-100">
            <div class="card-body">
              <div class="d-flex align-item-center">
                <h2 class="small text-uppercase font-weight-medium text-secondary mr-1">Validator Pubkeys</h2>
              </div>
              <div class="d-flex justify-content-between align-items-center">
                <span class="h6 font-weight-normal mb-0">{{ .Stats.UniqueValidatorCount }} Validators</span>
                <span class="h6 font-weight-normal mb-0"><b>{{ .InvalidDepositCount }}</b> Invalid Deposits</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <h2 class="h4 my-3">
        <span class="nav-text">Initiated Deposits</span>
      </h2>
      <div>
        {{ template "depositChart" . }}
      </div>
      <h6 class="my-2 text-muted">This table displays the deposits made for validators who wish to join the Beacon Chain.</h6>
      <div class="card">
        <div class="card-body px-0 py-2">
          <div class="table-responsive pt-2">
            <table class="table" id="initiated-deposits">
              <thead>
                <tr>
                  <th>Address</th>
                  <th>Validator Key</th>
                  <th>Withdrawal Credential</th>
                  <th>Amount</th>
                  <th>Tx Hash</th>
                  <th>Time</th>
                  <th>Block</th>
                  <th>Validator State</th>
                </tr>
              </thead>
              <tbody>
                {{ if len .DepositContract }}
                {{ else }}
                  <tr>
                    <td colspan="7">Waiting for Deposit Contract</td>
                  </tr>
                {{ end }}
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <h2 class="my-3 h4">
        <span class="nav-text">Included Deposits</span>
      </h2>
      <h6>This table displays the deposits received by the Beacon Chain.</h6>
      <div class="card">
        <div class="card-body px-0 py-2">
          <div class="table-responsive pt-2">
            <table class="table" id="included-deposits">
              <thead>
                <tr>
                  <th>Slot</th>
                  <th>Validator Key</th>
                  <th>Amount</th>
                  <th>Withdrawal Credentials</th>
                  <th>Signature</th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  {{ end }}
{{ end }}
